<template>
  <div ref="container" class="container">
    <div>
      <!-- hot -->
      <div class="hot">
        <div class="hot-title">热门城市</div>
        <ul class="hot-list">
          <li v-for="item in hotCities" :key="item.id" class="hot-item" @click="changeCityName(item.name)">
            {{ item.name }}
          </li>
        </ul>
      </div>
      <!-- sort -->
      <div class="sort">
        <div class="sort-title">字母排序</div>
        <ul class="sort-list">
          <li v-for="(val,key) in cities" :key="val.id" class="sort-item" @click="changeSort(key)">
            {{ key }}
          </li>
        </ul>
      </div>
      <!-- list -->
      <div class="list">
        <div v-for="(val, key) in cities" :key="val.id"
        :ref="key"
        >
          <div class="list-title">{{ key }}</div>
          <ul class="list-msg">
            <li v-for="item in val" :key="item.id" class="list-item" @click="changeCityName(item.name)">
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {mapMutations} from 'vuex'
import BScroll from "better-scroll";
export default {
  props: ["hotCities", "cities"],
  data() {
    return {
      scroll: "",
    };
  },
  mounted() {
    let container = this.$refs['container']
    this.scroll = new BScroll(container);
  },
  methods:{
      changeCityName(cityName){
          this.changeCity(cityName)
          console.log(cityName)
          this.$router.push('/')
      },
      changeSort(sortName){
        let sortEle = this.$refs[sortName][0]
        this.scroll.scrollToElement(sortEle)
      },
      ...mapMutations(['changeCity'])
  }
};
</script>
<style lang='stylus' scoped>
@import '~css/common.styl';

.container{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    top:0.88rem;
    background:#f5f5f5;
    overflow:hidden;
}
.hot-title {
  font-size: 0.24rem;
  color: #212121;
  padding: 0.2rem 0.3rem;
}

.hot-list {
  position: relative;
  overflow: hidden;
  background: #fff;
  font-size: 0.28rem;
  color: #212121;
}

.hot-list::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 33.33333%;
  left: 33.33333%;
  border-left: 0.02rem solid #ddd;
  border-right: 0.02rem solid #ddd;
}

.hot-item {
  position:relative;
  width: 33.33333%;
  text-align: center;
  height: 0.9rem;
  line-height: 0.9rem;
  float: left;
  border-bottom: 0.02rem solid #ddd;
}

.sort-title {
  font-size: 0.24rem;
  color: #212121;
  padding: 0.2rem 0.3rem;
}

.sort-list {
  position: relative;
  overflow: hidden;
  background: #fff;
  font-size: 0.28rem;
  color: #212121;
}

.sort-item {
  width: 16.66666%;
  text-align: center;
  height: 0.9rem;
  line-height: 0.9rem;
  float: left;
}

.list-title {
  font-size: 0.24rem;
  color: #212121;
  padding: 0.2rem 0.3rem;
}

.list-msg {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.list-msg::before {
  content: '';
  position: absolute;
  left: 25%;
  width: 25%;
  height: 100%;
  border-left: 0.02rem solid #ddd;
  border-right: 0.02rem solid #ddd;
}

.list-msg::after {
  content: '';
  position: absolute;
  left: 75%;
  width: 0%;
  height: 100%;
  border-left: 0.02rem solid #ddd;
}

.list-item {
  position:relative;
  width: 25%;
  font-size: 0.28rem;
  text-align: center;
  line-height: 0.9rem;
  float: left;
  border-bottom: 0.02rem solid #ddd;
  textOverflow();
}
</style>